﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeTest.aspx.cs" Inherits="WebTree.TreeTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="ZTree/zTreeStyle.css" rel="stylesheet" />
    <script src="ZTree/jquery-1.4.4.min.js"></script>
    <script src="ZTree/jquery.ztree.all-3.5.js"></script>

    <script type="text/javascript">

        var setting = {
            edit: {
                enable: true,
                showRemoveBtn: true,
                showRenameBtn: true

            },
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeDrag: beforeDrag,
                beforeDrop: beforeDrop,
                beforeRemove: beforeRemove,
                beforeRename: beforeRename
            }
        };

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                var NewNode = { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) };
                zTree.addNodes(treeNode, NewNode);
                //Add
                $.post("zTree/zgetdata.ashx?action=add", NewNode, function (zNodes) {
                    $.fn.zTree.init($("#treeDemo"), setting, eval("(" + zNodes + ")"));
                });

                return false;
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        };


        function beforeDrag(treeId, treeNodes) {

            for (var i = 0, l = treeNodes.length; i < l; i++) {
                if (treeNodes[i].drag === false) {

                    return false;
                }

            }
            return true;
        }
        function beforeDrop(treeId, treeNodes, targetNode, moveType) {

            var da = $("#" + treeId);


            var strNode = "";
            for (var i = 0 ; i < treeNodes.length; i++) {
                strNode += treeNodes[i].id + ",";
            }

            $.post("zTree/zgetdata.ashx?action=move", { id: strNode, pId: targetNode.id }, function (zNodes) {
                $.fn.zTree.init($("#treeDemo"), setting, eval("(" + zNodes + ")"));
            });
            return targetNode ? targetNode.drop !== false : true;

        }

        function beforeRemove(treeId, treeNode) {
            $.post("zTree/zgetdata.ashx?action=remove", { id: treeNode.id }, function (zNodes) {
                $.fn.zTree.init($("#treeDemo"), setting, eval("(" + zNodes + ")"));
            });
        }
        function beforeRename(treeId, node, newName) {

            $.post("zTree/zgetdata.ashx?action=rename", { id: node.id, name: newName }, function (zNodes) {
                $.fn.zTree.init($("#treeDemo"), setting, eval("(" + zNodes + ")"));
            });
        }



        $(document).ready(function () {

            $.post("zTree/zgetdata.ashx?action=getdata", {}, function (zNodes) {
                $.fn.zTree.init($("#treeDemo"), setting, eval("(" + zNodes + ")"));
            });

        });

    </script>

    <style type="text/css">
        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </form>
</body>
</html>
